<template>
  <div class='sign-list first-box'>
    <Search :searchFun="getSearch"></Search>
    <LineGray></LineGray>

    <div class="tab-box">
      <Tab :listData="tabData" :selected="selectedIndex" :className="{padding50:true}"></Tab>
    </div>

    <p class="title"><span>记录列表</span><span v-show="selectedIndex==0" class="fr btn-active" @click="sendall">一键确认</span></p>

    <Scroll :hasmore="hasmore" :pullup="pullup" :setHeight="'-140'">
      <List :data="listData"></List>
    </Scroll>
  </div>
</template>
<script>
import Search from '../../common/search'
import LineGray from '../../common/line.vue'
import Tab from '../../common/tab'
import Scroll from '../../common/scroller'
import List from './common/sign'
export default {
  components: {Search,LineGray,Tab,Scroll,List},
  name: "",
  data() {
    return {
      tabData:[
        {
          name:"未确认",
          click:this.changeTab,
          type:0,
          num:20
        },{
          name:"已确认",
          click:this.changeTab,
          type:1,
        },{
          name:"已领取",
          click:this.changeTab,
          type:2,
        },
      ],
      selectedIndex:0,
      hasmore:false,

      listData:[
        {
          id:1,
          img:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=601844189,3105094554&fm=173&app=25&f=JPEG?w=218&h=146&s=91945F965833328C6B344EFF03005017",
          name:"更换一大堆乱七八糟的东西",
          phone:"12345678911",
          state:0,//0待确认,1 已确认,2已领取
        },{
          id:1,
          img:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=601844189,3105094554&fm=173&app=25&f=JPEG?w=218&h=146&s=91945F965833328C6B344EFF03005017",
          name:"更换一大堆乱七八糟的东西",
          phone:"12345678911",
          state:1,//0待确认,1 已确认,2已领取
        },{
          id:1,
          img:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=601844189,3105094554&fm=173&app=25&f=JPEG?w=218&h=146&s=91945F965833328C6B344EFF03005017",
          name:"更换一大堆乱七八糟的东西",
          phone:"12345678911",
          state:2,//0待确认,1 已确认,2已领取
        },
      ]
    };
  },
  methods: {
    getSearch(search){
      console.log("click----search",search)
    },

    // 下拉刷新方法回调
    pullup(func){
      console.log("发请求了") 
      func()
    },

    changeTab(item){
      this.selectedIndex=item.type
      this.listname=item.listname
      console.log("click---tab--change")
    },

    // 下拉刷新方法回调
    pullup(func){
      console.log("发请求了")

      func()
    },

    // 一键派发
    sendall(){
      this.$store.state.dialogs.sure.content="是否一键确认？"
      this.$store.state.dialogs.sure.show=true
      this.$store.state.dialogs.sure.OK=this.sendOK
    },

    sendOK(){
      console.log("click---sendall")
      this.$store.state.dialogs.sure.show=false

    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.sign-list {
  background-color: #fff;
  .tab-box{
    background-color: #f2f2f2;
    padding-bottom: 1px;
  }
  .title{
    padding: 0 15px;
    font-size: 12px;
    line-height: 30px;
    color: #666;
    border-bottom: 1px solid #DBDBDB;
  }
  .btn-active{
    border: 1px solid #FF9F20;
    line-height: 20px;
    transform: translateY(4px);
    box-sizing: border-box;
    color: #FF9F20;
    border-radius: 2px;
  }
}
.padding50{
  padding-left: 50px;
  padding-right: 50px;
}
</style>